import { LineChart } from "echarts/charts";
import {
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
} from "echarts/components";
import * as echarts from "echarts/core";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { defineView } from "@/routers/tools.mjs";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  DataZoomComponent,
]);

const seriesData1 = [140, 232, 101, 264, 90, 340, 250];
const seriesData2 = [120, 282, 111, 234, 220, 340, 310];
const seriesData3 = [320, 132, 201, 334, 190, 130, 220];
const seriesData4 = [220, 402, 231, 134, 190, 230, 120];
const seriesData5 = [220, 302, 181, 234, 210, 290, 150];

/**
 * @satisfies {import("echarts").SeriesOption}
 */
const series1 = {
  name: "activeModules",
  type: "line",
  smooth: false,
  lineStyle: {
    width: 1,
  },
  showSymbol: false,
  // areaStyle: {
  //   opacity: 0.8,
  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //     {
  //       offset: 0,
  //       color: "rgb(128, 255, 165)",
  //     },
  //     {
  //       offset: 1,
  //       color: "rgb(1, 191, 236)",
  //     },
  //   ]),
  // },
  emphasis: {
    focus: "series",
  },
  /**
   * @type {number[]}
   */
  data: [],
};
/**
 * @satisfies {import("echarts").SeriesOption}
 */
const series2 = {
  name: "buildingProcess",
  type: "line",
  smooth: false,
  lineStyle: {
    width: 1,
  },
  showSymbol: false,
  // areaStyle: {
  //   opacity: 0.8,
  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //     {
  //       offset: 0,
  //       color: "rgb(0, 221, 255)",
  //     },
  //     {
  //       offset: 1,
  //       color: "rgb(77, 119, 255)",
  //     },
  //   ]),
  // },
  emphasis: {
    focus: "series",
  },
  /**
   * @type {number[]}
   */
  data: [],
};
/**
 * @satisfies {import("echarts").SeriesOption}
 */
const series3 = {
  name: "entries",
  type: "line",
  smooth: false,
  lineStyle: {
    width: 1,
  },
  showSymbol: false,
  // areaStyle: {
  //   opacity: 0.8,
  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //     {
  //       offset: 0,
  //       color: "rgb(55, 162, 255)",
  //     },
  //     {
  //       offset: 1,
  //       color: "rgb(116, 21, 219)",
  //     },
  //   ]),
  // },
  emphasis: {
    focus: "series",
  },
  /**
   * @type {number[]}
   */
  data: [],
};
/**
 * @satisfies {import("echarts").SeriesOption}
 */
const series4 = {
  name: "entriesAll",
  type: "line",
  smooth: false,
  lineStyle: {
    width: 1,
  },
  showSymbol: false,
  // areaStyle: {
  //   opacity: 0.8,
  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //     {
  //       offset: 0,
  //       color: "rgb(255, 0, 135)",
  //     },
  //     {
  //       offset: 1,
  //       color: "rgb(135, 0, 157)",
  //     },
  //   ]),
  // },
  emphasis: {
    focus: "series",
  },
  /**
   * @type {number[]}
   */
  data: [],
};
/**
 * @satisfies {import("echarts").SeriesOption}
 */
const series5 = {
  name: "entriesDelta",
  type: "line",
  smooth: false,
  lineStyle: {
    width: 1,
  },
  showSymbol: false,
  label: {
    show: true,
    position: "top",
  },
  // areaStyle: {
  //   opacity: 0.8,
  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //     {
  //       offset: 0,
  //       color: "rgb(255, 191, 0)",
  //     },
  //     {
  //       offset: 1,
  //       color: "rgb(224, 62, 76)",
  //     },
  //   ]),
  // },
  emphasis: {
    focus: "series",
  },
  /**
   * @type {number[]}
   */
  data: [],
};

/**
 * @satisfies {import('echarts').EChartsOption}
 */
const option = {
  color: ["#8AF8A5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
  title: {
    text: "Gradient Stacked Area Chart",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  legend: {
    /**
     * @mountReplacement
     * @type {string[]}
     */
    data: [],
  },
  dataZoom: [
    {
      show: true,
      realtime: true,
      start: 65,
      end: 85,
    },
    {
      type: "inside",
      realtime: true,
      start: 65,
      end: 85,
    },
  ],
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: "all",
      },
      saveAsImage: {},
    },
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  /**
   * @mountReplacement
   * @type {import("echarts").SeriesOption[]}
   */
  series: [],
};

/**
 * @implements {ng.IController}
 */
class LogAnalyzeController {
  option = option;

  /**
   * @type {HTMLElement | null}
   */
  chartDom = null;

  /**
   * @type {echarts.ECharts}
   */
  myChart;

  constructor() {
    this.chartDom = document.getElementById("LogAnalyze");
    this.myChart = echarts.init(this.chartDom);
    this.resizeObserver = new ResizeObserver(() => {
      this.myChart.resize();
    });
  }

  $onInit() {
    /**
     * @param {import('echarts').EChartsOption} option
     * @returns {(series: import("echarts").SeriesOption) => void}
     */
    function useSeries(option) {
      /**
       * @param {import("echarts").SeriesOption} series
       * @returns {void}
       */
      return function (series) {
        /**
         * @type {import("echarts").SeriesOption[]}
         */ (option.series).push(series);
        /**
         * @type {import("echarts").LegendComponentOption & {data: string[]}}
         */ (option.legend).data.push(/** @type {string} */ (series.name));
      };
    }
    import(
      /* webpackChunkName: "log-analyze-json" */
      /* webpackMode: "lazy" */
      "./log-analyze.data.json",
      {
        with: {
          type: "json",
        },
      }
    )
      .then((d) => {
        const useSeriesHandler = useSeries(this.option);
        series1.data = d.default.activeModules;
        /**
         * @type {number[]}
         */
        const buildingProcess = [];
        /**
         * @type {number[]}
         */
        const entries = [];
        /**
         * @type {number[]}
         */
        const entriesAll = [];
        /**
         * @type {number[]}
         */
        const entriesDelta = [];
        for (let i = 0; i < d.default.activeModules.length; i++) {
          buildingProcess.push(d.default.buildingProcess[i][0]);
          entries.push(d.default.entries[i][0]);
          entriesAll.push(d.default.entries[i][1]);
          entriesDelta.push(d.default.entries[i][1] - d.default.entries[i][0]);
        }
        // 这里防止拷贝
        series2.data = buildingProcess;
        series3.data = entries;
        series4.data = entriesAll;
        series5.data = entriesDelta;

        // useSeriesHandler(series1);
        // useSeriesHandler(series2);
        // useSeriesHandler(series3);
        // useSeriesHandler(series4);
        useSeriesHandler(series5);
      })
      .finally(() => {
        this.initEcharts();
        this.resizeObserver.observe(
          /**
           * @type {NonNullable<HTMLElement>}
           */
          (this.chartDom),
        );
      });
  }

  /**
   * @private
   */
  initEcharts() {
    this.myChart.setOption(this.option);
  }

  reInit() {
    this.initEcharts();
  }

  $onDestroy() {
    this.myChart.dispose();
    this.resizeObserver.disconnect();
  }
}
/**
 * @type {DefineView}
 */
const logAnalyzeView = defineView({
  controller: LogAnalyzeController,
  controllerAs: "vm",
  template: /* HTML */ html`
    <div class="chart h-[800px]" id="LogAnalyze"></div>
  `,
});

export default logAnalyzeView;

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}
